﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <!--
// // -------------------------------------------------------------------------------------
// // Copyright 2012 ELEN7046 Group 2
// // 
// // Last Modified on: 2012-06-10
// // 
// // Contributors:
// // 
// // Amith Sewnarain
// // Elmar Vosloo
// // Jason Thorne
// // Satish Jewan
// // 
// // Wits University 
// // School of Electrical & Information Engineering
// // Software Engineering Tools and Techniques
// // 
// // -------------------------------------------------------------------------------------
// // 
// // This file is part of the DishDash Event Visualization System.
// // 
// // DishDash is free software: you can redistribute it and/or modify
// // it under the terms of the GNU General Public License as published by
// // the Free Software Foundation, either version 3 of the License, or
// // (at your option) any later version.
// // 
// // DishDash is distributed in the hope that it will be useful,
// // but WITHOUT ANY WARRANTY; without even the implied warranty of
// // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// // GNU General Public License for more details.
// // 
// // You should have received a copy of the GNU General Public License
// // along with DishDash.  
// // If not, see <http://www.gnu.org/licenses/>.
// // -------------------------------------------------------------------------------------
-->
    <head>
        <title>Dish Dash ~ Event Monitoring Dashboard [ELEN 7046 Group 2 Course Project]</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.6.2.min.js" type="text/javascript"> </script>
        <script src="js/bootstrap.min.js" type="text/javascript"> </script>
        <script src="js/knockout-1.2.1.js" type="text/javascript"> </script>
        <script src="js/dishdash.widgetconfiguration.js" type="text/javascript"> </script>
        <script src="js/flotr2.min.js" type="text/javascript"> </script>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>
        <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"> </script>
        <script src="services/EventFetchingClientSideService.js" type="text/javascript"> </script>
        <script type="text/javascript" src="widgets/dishdash.widget.eventcount.line.js"> </script>
        <script type="text/javascript" src="widgets/dishdash.widget.eventcount.pie.js"> </script>
        <script type="text/javascript" src="widgets/dishdash.widget.eventdistribution.radar.js"> </script>
        <script type="text/javascript" src="widgets/dishdash.widget.eventdistribution.stackedbar.js"> </script>
    </head>
    <body onload="displayWidgets();">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Dish Dash ~ Event Monitoring Dashboard</a>&nbsp;
                    <ul class="nav">
                        <li class="active"><a href="#">Dashboard</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="span8">
            <button class="btn btn-primary" style="vertical-align: top" onclick=" addWidget(); ">
                Add New Widget</button>
            <button class="btn btn-primary" style="vertical-align: top" onclick=" dishdash.widgetconfiguration.clearStorage(); ">
                Clear Dashboard</button>
            <table style="width: 100%;">
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <!--                <td>-->
                </tr>
                <tr>
                    <td>
                        <div id="Div2" style="border-width: 2px; border-style: solid; border-color: #dddddd;">
                            <div id="Div1" style="border-width: 2px; border-style: solid; border-color: #dddddd;">
                                Available Widgets</div>
                            <div id="widgetItems">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="WidgetData" class="container" style="visibility: hidden">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label">
                                        Displaying Widget</label>
                                    <div class="controls">
                                        <input id="WidgetName" type="text" class="input-xlarge" readonly="readonly" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                    </label>
                                </div>
                            </fieldset>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="renderGraph" style="border-width: 2px; border-style: solid; border-color: #dddddd;">
                            Drop Widget Here....
                            <!--                        <table>
                                                            <tr>
                                                                <td>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                </td>
                                                            </tr>
                                                        </table>-->
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">

            displayWidgets = function() {
                var widgets = dishdash.widgetconfiguration.getAllWidgets();

                if (widgets == null) {
                    alert("No widgets configured!");
                    return;
                }


                var cell = document.getElementById("widgetItems");

                if (cell.hasChildNodes()) {
                    while (cell.childNodes.length >= 1) {
                        cell.removeChild(cell.firstChild);
                    }
                }
                var i = 0;
                $.each(widgets, function(keyname, objwidget) {

                    var newdiv = document.createElement('div');
                    newdiv.id = i;
                    newdiv.className = "item";
                    newdiv.innerHTML = objwidget["widgetName"];

                    //Add the new div for the current graph
                    document.getElementById('widgetItems').appendChild(newdiv);

                    $('#' + i + '').draggable();
                    i++;
                    showGraph(objwidget["widgetName"]);
                });
            };


            showGraph = function(dragDropName) {
                try {
                    //alert(dragDropName);
                    var graphDivName = "renderGraph";

                    var widget = dishdash.widgetconfiguration.getAWidget(dragDropName);

                    //Dynamically Add Div to plot this graph
                    addDiv(widget.widgetName);

                    //Get the widget name from the drop down list
                    document.getElementById("WidgetName").value = widget.widgetName;

                    //Show the a Text box with name for the widget selected
                    var WidgetDataDiv = document.getElementById("WidgetData");
                    WidgetDataDiv.style.visibility = "visible";


                    if (widget.WidgetType == dishdash.widgetconfiguration.WidgetTypeEnum.LineGraph) {
                        var graph = new dishdash.graphs.timeGraph(widget.widgetName, widget);
                    } else if (widget.WidgetType == dishdash.widgetconfiguration.WidgetTypeEnum.AggrEventCount) {
                        var graph = new dishdash.graphs.eventCountWidget(widget.widgetName, widget);
                    } else if (widget.WidgetType == dishdash.widgetconfiguration.WidgetTypeEnum.EventDist) {
                        if (widget.GraphType == 1) {
                            //Bar Graph
                            var graph = new dishdash.graphs.eventDistributionWidget(widget.widgetName, widget);
                        } else if (widget.GraphType == 2) {
                            //Radar Graph
                            var graph = new dishdash.graphs.eventDistributionByContextValueWidget(widget.widgetName, widget);
                        }

                    } else {
                        alert("No valid widget type found.");
                    }


                    graph.start();

                    //Put back the original widgets
                    //displayWidgets();
                } catch(err) {
                    alert("Error displaying graph : " + err.Description);
                }
            };

            addWidget = function() {
                window.open("CreateEditWidget.htm", "Add Widget");
            };

            editWidget = function() {
                window.open("CreateEditWidget.htm?WidgetName=" + WidgetName.value, "Edit Widget");
            };


            addDiv = function(widgetName) {

                var newdiv = document.createElement('div');
                newdiv.setAttribute("id", widgetName);
                newdiv.setAttribute("style", 'width: 1024px; height: 400px;');

                //Create the edit button for each widget
                var editButton = document.createElement('input');
                editButton.type = "button";
                editButton.value = "Edit Widget";
                editButton.className = "btn btn-primary";
                editButton.onclick = function() {
                    window.open("CreateEditWidget.htm?WidgetName=" + widgetName, "Edit Widget");
                }; //Add the new div for the current graph
                document.getElementById('renderGraph').appendChild(newdiv);
                //Add the edit button
                document.getElementById('renderGraph').appendChild(editButton);
            };
            popUpClosed = function() {
                window.location.reload();
            };
            $(function() {
                $(".item").draggable({
                
                
                //revert: 'invalid'
                });
                $("#renderGraph").droppable({
                    drop: function(event, ui) {
                        showGraph(ui.draggable.html());
                    },
                    accept: function(dropElem) {
                        return true;
                    }
                });


            });

        </script>
    </body>
</html>
